import React, { Component } from 'react'
import styles from "../assets/styles/page.module.css"

/**
 * {
 *  code:200,
 *  data:[{}],
 * total:100
 * }
 * 价格，需要保留小数点两位，并且四舍五入
 */
export default class Pageing extends Component {
    get totalPage() {
        const {total,pageSize} = this.props
        return Math.ceil(total/pageSize)
    }
    get createButton(){
        const array = []
        for (let index = 0; index < this.totalPage; index++) {
            array.push(<span key={index} data-index={index+1}>{index+1}</span>)
        }
        return array
    }
    changeCurrentPage = (event)=>{
        const value = event.target.getAttribute("data-index")
        console.log(typeof value);
        this.props.changePage(parseInt(value))
    }
    render() {
        const { currentPage, pageSize, total } = this.props
        return (
            <div className={styles.fenye}>
                <span>当前{currentPage}页/共{this.totalPage}页</span>
                <select name="" id="">
                    <option value="">每页3条</option>
                    <option value="">每页6条</option>
                    <option value="">每页9条</option>
                </select>
                <input type="text" />
                <button>goto</button>
                <div className={styles.page} onClick={this.changeCurrentPage}>
                    {this.createButton}
                </div>
            </div>
        )
    }
}
